<template>
    <div class="functions">
        <!-- <div class="routeOrders">
            <img class="Rimg" :src="require('assets/img/message/Rimg.svg')" alt="">
            <div class="Rtext">路线订单</div>
        </div> -->
        <div class="interactiveMessages">
            <img class="IMimg" :src="require('assets/img/message/IMimg.svg')" alt="">
            <div class="IMtext">互动消息</div>
        </div>
        <div class="travelReminders">
            <img class="TRimg" :src="require('assets/img/message/提醒.svg')" alt="">
            <div class="TRtext">联系客服</div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'InfNav',
  }
</script>

<style scoped>
  /* 设置功能栏框样式 */
  .functions {
    position: absolute;
    /* top: 50px; */
    left: 50%;
    transform: translate(-50%);
    margin-top: 10px;


    width: 80%;
    height: 80px;
    display: flex;
    overflow: hidden;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    font-size: 10px;
  }
  /* 设置路线订单样式 */
  .routeOrders {
    flex: 1;
    text-align: center;
    padding: 10px;
  }
  /* 设置路线订单照片 */
  .Rimg {
    height: 30px;
    width: 30px;
    margin: 5px;    
  }
  /* 设置互动消息样式 */
  .interactiveMessages {
    flex: 1;
    padding: 10px;
  }
  .IMimg {
    height: 30px;
    width: 30px;
    margin: 5px; 
  }
  /* 设置出行提醒样式 */
  .travelReminders {
    flex: 1;
    padding: 10px;
  }
  .TRimg {
    height: 30px;
    width: 30px;
    margin: 5px; 
  }
</style>